import React, { useState, useRef, useEffect } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
import { faEdit, faTrash, faTimes } from '@fortawesome/free-solid-svg-icons'
import PropTypes from 'prop-types'
import useKeyPress from '../hooks/useKeyPress'
import useContextMenu from '../hooks/useContextMenu'
import { findParentNode } from '../utils/helper'

const FileList = (props) => {
  const { files, onFileClick, onFileDelete, onFileEdit } = props;
  const [editStatus, setEditStatus] = useState('');
  const [value, setValue] = useState('');
  const node = useRef();

  const enterPressed = useKeyPress(13)
  const escPressed = useKeyPress(27)
  const clickedElement = useContextMenu([{
    label: '打开',
    click: () => {
      const parentNode = findParentNode(clickedElement.current,'file-item')
      if(parentNode) {
        const id = parentNode.dataset.id;
        onFileClick(id)
      }
    }
  }, {
    label: '编辑',
    click: () => {
      console.log('editing')
      const parentNode = findParentNode(clickedElement.current, 'file-item')
      if (parentNode) {
        const id = parentNode.dataset.id;
        const title = parentNode.dataset.title;
        editFile(id, title)
      }
    }
  }, {
    label: '删除',
    click: () => {
      console.log('editing')
      const parentNode = findParentNode(clickedElement.current, 'file-item')
      if (parentNode) {
        const id = parentNode.dataset.id;
        onFileDelete(id)
      }
    }
    }],'#file-list');



  useEffect(() => {
    if (enterPressed && editStatus) {
      if (files.find(file => file.isNew === true && value.trim() === '')) {
        return
      }
      onFileEdit(editStatus, value);
      closeEdit();
    }
    if (escPressed && editStatus) {
      closeEdit();
    }
  })

  useEffect(() => {
    if (editStatus) {
      node.current.focus();
    }
  }, [editStatus])

  useEffect(() => {
    const newFile = files.find(item => item.isNew === true && !item.title)
    if (newFile) {
      setEditStatus(newFile.id);
      setValue(newFile.title);
    }
  }, [files])

  function closeEdit() {

    setValue('');
    setEditStatus('');

    const emptyTitlefile = files.find(file => file.isNew === true)
    if (emptyTitlefile) {
      onFileDelete(emptyTitlefile.id)
    }
  }
  function editFile(id, value) {
    setEditStatus(id);
    setValue(value);
  }

  const onBlur = () => {
    if (value === '') {
      closeEdit()
    } else {
      onFileEdit(editStatus, value);
      closeEdit();
    }
  }

  return (
    <ul className='list-group list-group-flush' id='file-list'>
      {
        files.map((file, index) => {
          return <li key={file.id} data-id={file.id} data-title={file.title} className='row list-group-item bg-light d-flex align-items-center mx-0 file-item'>
            <span className='col-2'>
              <FontAwesomeIcon icon={faMarkdown} size='lg'></FontAwesomeIcon>
            </span>
            {
              editStatus === file.id && <div className='d-flex justify-content-between align-items-center col-8'>
                <input onBlur={onBlur} ref={node} type="text" className="form-control input" value={value} onChange={(e) => { setValue(e.target.value) }} placeholder="" />
                <FontAwesomeIcon onClick={closeEdit} size='lg' icon={faTimes}></FontAwesomeIcon>
              </div>
            }
            {
              editStatus !== file.id && <>
                <span className='col-10 c-link' onClick={() => { onFileClick(file.id) }}>
                  {file.title}
                </span>
                {/* <button type='button' className='icon-button col-2' onClick={() => { editFile(file.id, file.title) }}>
                  <FontAwesomeIcon icon={faEdit} size='sm'></FontAwesomeIcon>
                </button>
                <button type='button' className='icon-button col-2' onClick={() => { onFileDelete(file.id) }}>
                  <FontAwesomeIcon icon={faTrash} size='sm'></FontAwesomeIcon>
                </button> */}
              </>
            }



          </li>
        })
      }
    </ul>
  )
}

FileList.prototype = {
  files: PropTypes.array,
  onFileClick: PropTypes.func.isRequired,
  onFileDelete: PropTypes.func.isRequired,
  onFileEdit: PropTypes.func.isRequired
}

export default FileList
